<template>
	<div id='app'>
		<section class="container" id="goods" style="flex: 1;">
			<div class="container">
				<div class="goods_info">
					<div class="row" v-if="showData">
						<section class="col-3" v-for='a in list.goods'>
							<router-link :to="{path:'/goodsdetails',query:{goods_id:a.goods_id}}">
								<img :src="a.goods_small_logo?a.goods_small_logo:'https://th.bing.com/th/id/Rba514750b17ba93e3246dddc1701fb32?rik=PI%2b5poMwtaPpVg&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2020%2f0110%2f20200110051242482.png&ehk=0%2flB0BGtq0UTwL3A%2bfvgrCZx5fElQZlFAS2%2b4qaQkTk%3d&risl=&pid=ImgRaw'" />
								<div class="goods_title">
									<h3>{{a.goods_name.slice(0,30)}}...</h3>
									<h5>{{a.info}}</h5>
								</div>
								<div class="price">
									<span>￥{{a.goods_price}}</span>
								</div>
							</router-link>
						</section>
					</div>
					<div class="no_data" v-else>
						暂无数据
					</div>
				</div>
			</div>
		</section>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				list: [],
				showData:true
			}
		},
		watch:{
			'$route' (to,from){
				this.getData()
			}
		},
		methods:{
			getData(){
				let cid = this.$route.query.cid;
				this.$axios.post('http://localhost:8080/mall/goods/search?pagenum=1&pagesize=20&cid=' + cid).then(function(ret) {
					this.list = ret.data.message;
					console.log(this.list,"this.list");
					console.log(this.list.goods.length)
					if(this.list.goods.length>1){
						this.showData = true
						
					}else{
						this.showData = false
					}
				}.bind(this));
			}
		},
		mounted(){
			this.getData();
		}
	}
</script>

<style lang="less">
	a:hover {
		text-decoration: none;
	}

	#goods {
		margin-top: 150px;

		.goods_nav {
			display: flex;
			padding-left: 9px;

			.link {
				color: #999;
				-webkit-transition: color .3s ease;
				transition: color .3s ease;
				line-height: 60px;
				float: left;
				font-size: 12px;
			}

			.dot {
				width: 2px;
				height: 2px;
				margin: 29px 20px;
				background-color: #c7c7c7;
			}

			.active {
				cursor: auto;
				color: #5683ea;
			}
		}

		.goods_info {
			width: 1140px;
			//min-height: 375px;
			border-radius: 8px;
			background-color: #fff;
			
			.row {
				margin-left: 0px;
				margin-right: 0px;
			}
			.no_data{
				width: 100%;
				height: 400px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40px;
				color: #bec7ca;
			}
			section {
				border: none;
				border-right: 1px solid #efefef;
				border-bottom: 1px solid #efefef;
				border-radius: initial;
				background: #fff;
				-webkit-transition: -webkit-box-shadow .15s ease-out;
				transition: -webkit-box-shadow .15s ease-out;
				transition: box-shadow .15s ease-out;
				transition: box-shadow .15s ease-out, -webkit-box-shadow .15s ease-out;
				text-align: center;

				cursor: pointer;

				img {
					width: 204px;
					height: 204px;
					margin: 0 auto;
					padding: 20px 0 0;
				}

				.goods_title {
					margin-top: 20px;
					height: auto;

					h3 {
						font-size: 14px;
						font-weight: 700;
						margin: 0px 12px;
						padding-top: 8px;
						color: #333;
					}

					h5 {
						padding: 15px 10px 0;
						font-size: 12px;
						color: #999;
					}
				}

				.price {
					margin-top: 40px;
					margin-bottom: 10px;

					span {
						font-family: Arial;
						font-size: 18px;
						font-weight: bolder;
						color: #d44d44;
						padding-bottom: 2px;
						-webkit-transition: all .1s ease-out;
						transition: all .1s ease-out;
					}
				}

				&:hover {
					transform: translateY(-3px);
					box-shadow: 1px 1px 20px #999;
					text-decoration: none;
				}
			}
		}
	}
</style>
